import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const timelineDocs= {source: {code: `steps := []component.TimelineStep{
  {
    State:       component.TimelineStepNotStarted,
    Header:      "Header test",
    Title:       "Title test",
    Description: "Title description",
  },
}
timeline := component.NewTimeline(steps, true)
timeline.Add(component.TimelineStep{
  State:       component.TimelineStepCurrent,
  Header:      "current test",
  Title:       "current title",
  Description: "current description",
}, component.TimelineStep{
  State:       component.TimelineStepProcessing,
  Header:      "loading",
  Title:       "loading title",
  Description: "loading description",
})`}}

export const buttonGroupView = {
  config: {
    buttons: [
        {
          metadata: {
            type: "button"
          },
          config: {
            name: 'Testing',
            payload: {},
            confirmation: {
              title: 'Confirm action',
              body: 'Are you sure?',
            },
          },
        },
      ],
  },
  metadata: {
    type: 'buttonGroup'
  }
}

export const timelineView = {
  metadata: {
    type: 'timeline',
  },
  config: {
    steps: [
      {
        state: "current",
        header: "current header",
        title: 'Step 1',
        description: 'this is a current step',
        buttonGroup: buttonGroupView,
      },
      {
        state: "processing",
        header: 'processing header',
        title: 'Step 2',
        description: 'this is a processing step'
      }
    ]
  },
};

export const TimelineStoryTemplate = args => ({
  template: `<app-view-timeline [view]= "view"></app-view-timeline>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Timeline Component</h1>
<h2>Description</h2>

<p>A timeline component is used to show the user's current state in a series of steps.</p>

<h2>Example</h2>

<Meta title="Components/Timeline" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Timeline component"
         parameters={{ docs: timelineDocs }}
         args= {{ view: timelineView, }}>
    { TimelineStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Timeline component" />
